<template>
	<view :class="vi_pageSize">
		<vi-notify :top="topfix" ref="vi_notify"></vi-notify>
		<module-loading ref="vi_loading" :loading="vi_loading" :loadingMask="vi_loadingMask"></module-loading>
		<vi-headbar goback>
			<view slot="right">
				响应式
				<text class="response">开启</text>
				<text class="noresponse color-warning">关闭</text>
			</view>
			{{vi_pageTitle}}
		</vi-headbar>
		<view class="docTable">
			<view class="th">
				<view>属性名</view>
				<view>类型</view>
				<view>默认值</view>
				<view>描述</view>
			</view>
			<view class="tr">
				<view>title</view>
				<view>String</view>
				<view>无</view>
				<view>窗口标题</view>
			</view>
			<view class="tr">
				<view>content</view>
				<view>String</view>
				<view>无</view>
				<view>不使用slot时的内容文字</view>
			</view>
			<view class="tr">
				<view>params</view>
				<view>Any</view>
				<view>无</view>
				<view>外部参数传递，在事件提交时附加该参数</view>
			</view>
			<view class="tr">
				<view>mode</view>
				<view>String</view>
				<view>无</view>
				<view>对话框方案名，定义在options.js</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>text</view>
					<view>Object</view>
					<view></view>
					<view>内部文字数据覆盖</view>
				</view>
				<view class="appendix">
					格式：{key:"文字"}，key取自按钮事件名
				</view>
			</view>
			<view class="tr">
				<view>options</view>
				<view>Object</view>
				<view>无</view>
				<view>特殊设置覆盖，详情见下</view>
			</view>
			<view class="tr extra">
				<view class="body">
					<view>shift</view>
					<view>Object</view>
					<view>无</view>
					<view>窗口偏移</view>
				</view>
				<view class="appendix">
					格式：{top:"数值与单位",bottom:"数值与单位"}，可用calc
				</view>
			</view>
			<view class="tr">
				<view>@event</view>
				<view>事件</view>
				<view></view>
				<view>按钮事件，提交{event: 按钮事件名, params: 传递参数, button: 按钮对象}</view>
			</view>
			<view class="tr">
				<view>@???</view>
				<view>事件</view>
				<view></view>
				<view>按钮事件，事件名与按钮事件名相同，提交params传递参数</view>
			</view>
			<view class="tr">
				<view>@opened</view>
				<view>事件</view>
				<view></view>
				<view>窗口已打开事件，用于判断可使用$refs</view>
			</view>
			<view class="tr">
				<view>@change</view>
				<view>事件</view>
				<view></view>
				<view>窗口状态变更事件，提交窗口状态</view>
			</view>
			<view class="tr">
				<view>open</view>
				<view>function</view>
				<view></view>
				<view>打开方法，可传入带title、point、content、params、options的对象参数，覆盖props的参数。options详情见下</view>
			</view>
			<view class="tr">
				<view>close</view>
				<view>function</view>
				<view></view>
				<view>关闭方法</view>
			</view>
		</view>
		
		<view class="p-sm">
			<vi-collapse title="options参数" headClass="bgColor-contrast" boxClass="b-default">
				<view class="docSubTable">
					<view class="th">
						<view>属性名</view>
						<view>类型</view>
						<view>默认值</view>
						<view>描述</view>
					</view>
					<view class="tr">
						<view>point</view>
						<view>String</view>
						<view>打开位置</view>
					</view>
					<view class="tr">
						<view>maskClick</view>
						<view>Boolean</view>
						<view>点击遮罩关闭</view>
					</view>
					<view class="tr">
						<view>useContent</view>
						<view>Boolean</view>
						<view>使用内容区域</view>
					</view>
					<view class="tr">
						<view>radius</view>
						<view>String</view>
						<view>外框圆角</view>
					</view>
					<view class="tr">
						<view>width</view>
						<view>String</view>
						<view>外框宽度</view>
					</view>
					<view class="tr">
						<view>maxWidth</view>
						<view>String</view>
						<view>外框最大宽度</view>
					</view>
					<view class="tr">
						<view>maxHeight</view>
						<view>String</view>
						<view>内容区最大高度</view>
					</view>
					<view class="tr">
						<view>bodyHeight</view>
						<view>String</view>
						<view>内容区高度</view>
					</view>
					<view class="tr">
						<view>spaceInside</view>
						<view>String, Array</view>
						<view>框内边距</view>
					</view>
					<view class="tr">
						<view>spaceOutside</view>
						<view>String, Array</view>
						<view>框外边距</view>
					</view>
					<view class="tr">
						<view>style</view>
						<view>String</view>
						<view>slot框样式</view>
					</view>
					<view class="tr">
						<view>topbar</view>
						<view>Object</view>
						<view>
							顶部按钮条数据，详细参数见vi-dialog组件。覆盖优先级：
							<view>
								方案options {{"<"}} props options {{"<"}} open options
							</view>
						</view>
					</view>
					<view class="tr">
						<view>bottombar</view>
						<view>Object</view>
						<view>底部按钮条数据，详细参数见vi-dialog组件。覆盖优先级同上</view>
					</view>
					<view class="tr">
						<view>toolbar</view>
						<view>Object</view>
						<view>工具按钮条数据，详细参数见vi-dialog组件。覆盖优先级同上</view>
					</view>
					<view class="tr">
						<view>topOptions</view>
						<view>Object</view>
						<view>顶部按钮条配置数据，单独覆盖topbar对象内属性。覆盖优先级同上</view>
					</view>
					<view class="tr">
						<view>bottomOptions</view>
						<view>Object</view>
						<view>底部按钮条配置数据，单独覆盖bottombar对象内属性。覆盖优先级同上</view>
					</view>
					<view class="tr">
						<view>toolOptions</view>
						<view>Object</view>
						<view>工具按钮条配置数据，单独覆盖toolbar对象内属性。覆盖优先级同上</view>
					</view>
					<view class="tr">
						<view>topList</view>
						<view>Object</view>
						<view>顶部按钮数据，单独覆盖topbar对象内的list数组。覆盖优先级同上</view>
					</view>
					<view class="tr">
						<view>bottomList</view>
						<view>Object</view>
						<view>底部按钮数据，单独覆盖bottombar对象内的list数组。覆盖优先级同上</view>
					</view>
					<view class="tr">
						<view>toolList</view>
						<view>Object</view>
						<view>工具按钮数据，单独覆盖toolbar对象内的list数组。覆盖优先级同上</view>
					</view>
				</view>
			</vi-collapse>
		</view>
		
		<view class="p-sm">
			<view class="py-sm">
				本组件作为vi-dialog组件的方案定制器，用于立即成型，快速调用
			</view>
			<view class="py-sm">
				基本使用：{{'&lt;common-dialog ref="组件id" mode="方案名" title="对话框标题">对话框内容&lt;/common-dialog>'}}
				<view>
					使用refs调用组件的open方法打开
				</view>
			</view>
			<view class="py-sm">
				<common-dialog ref="demo1" mode="confirm-center" title="标题">中部确认框confirm-center</common-dialog>
				<vi-button @click="openWin('demo1')">中部确认框</vi-button>
			</view>
			<view class="py-sm">
				<common-dialog ref="demo2" mode="confirm-bottom" title="标题">底部确认框confirm-bottom</common-dialog>
				<vi-button @click="openWin('demo2')">底部确认框</vi-button>
			</view>
			<view class="py-sm">
				<common-dialog ref="demo3" mode="info-center" title="标题">中部消息框info-center</common-dialog>
				<vi-button @click="openWin('demo3')">中部消息框</vi-button>
			</view>
			<view class="py-sm">
				<common-dialog ref="demo4" mode="info-bottom" title="标题">底部消息框info-bottom</common-dialog>
				<vi-button @click="openWin('demo4')">底部消息框</vi-button>
			</view>
			<view class="py-sm">
				<common-dialog ref="demo5" mode="menu-bottom" :options="menuOptions"></common-dialog>
				<vi-button @click="openWin('demo5')">底部菜单</vi-button>
			</view>
			<view class="py-sm">
				<common-dialog ref="demo6" mode="menu-top" :shift="shiftTop" :options="menuOptions"></common-dialog>
				<vi-button @click="openWin('demo6')">顶部菜单</vi-button>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				menuOptions:{
					bottombar:{
						line:true,
						lineHeight:"0.2em",
						list:[
							{event:"button1", name:"按钮1"},
							{event:"button1", name:"按钮2"}
						]
					}
				}
			}
		},
		methods: {
			
		}
	}
</script>

<style lang="scss" scoped>
.response{
	display: if($useResponse, inline, none);
}
.noresponse{
	display: if($useResponse, none, inline);
}
</style>
